<template>
  <a-modal
    centered
    width="1600px"
    v-model="visible"
    :footer="null"
    :z-index="1001"
    @cancel="onCallCancel"
  >
    <template slot="title">
      <a-avatar
        size="large"
        :style="{ backgroundColor: '#35bee9', verticalAlign: 'middle' }"
      >
        驳
      </a-avatar>
    </template>
    <div class="l-call-phone">
      <a-row :gutter="60">
        <a-col :span="9" :style="{ overflow: 'hidden' }">
          <a-spin :spinning="leftLoading">
            <a-form-model
              ref="customerForm"
              :model="customerForm"
            >
              <a-row :gutter="10">
                <a-col :span="8">
                  <a-form-model-item label="注册号">
                    <a-input placeholder="客户名称" v-model="customerForm.apply" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="商标名">
                    <a-input placeholder="请输入申请人" v-model="customerForm.tm_category" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="申请人">
                    <a-input placeholder="请输入申请人" v-model="customerForm.tm_category" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="法人">
                    <a-input placeholder="客户名称" v-model="customerForm.apply" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="注册类别">
                    <a-input placeholder="请输入所属行业" v-model="customerForm.tm_category" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="申请日期">
                    <a-input v-model="customerForm.registration_no" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="驳回日期">
                    <a-input v-model="customerForm.first_time" type="text" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="联系电话1">
                    <a-row :gutter="5">
                      <a-col :span="14">
                        <a-input disabled :style="{ color: '#333' }" type="text" v-model="customerForm.phone" />
                      </a-col>
                      <a-col :span="5">
                        <a-button type="danger" @click="phoneModal(customerForm.phone)"> 开始通话 <a-icon type="phone" /> </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="联系电话2">
                    <a-row :gutter="5">
                      <a-col :span="14">
                        <a-input type="text" v-model="customerForm.phone2" />
                      </a-col>
                      <a-col :span="5">
                        <a-button type="danger" :disabled="customerForm.phone2 === ''" @click="phoneModal(customerForm.phone2)"> 开始通话 <a-icon type="phone" /> </a-button>
                      </a-col>
                    </a-row>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-form-model-item label="微信号">
                    <a-input placeholder="请输入微信号" v-model="customerForm.wechat"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="代理机构">
                    <a-input placeholder="请输入代理机构" v-model="customerForm.wechat"></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-form-model-item label-align="left" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" label="最新申请地址">
                <a-input placeholder="请输入最新申请地址" v-model="customerForm.wechat"></a-input>
              </a-form-model-item>
              <a-form-model-item label-align="left" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" label="申请人商标地址">
                <a-input placeholder="请输入申请人商标地址" v-model="customerForm.wechat"></a-input>
              </a-form-model-item>
              <a-form-model-item label-align="left" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" label="更多联系方式">
                <a-input placeholder="请输入更多联系方式" v-model="customerForm.wechat"></a-input>
              </a-form-model-item>
              <a-divider />
              <a-form-model-item>
                <a-row>
                  <a-col :span="12" :style="{ textAlign: 'left' }">
                    <a-button type="default" @click="onSubmit(1)">
                      问题资源
                    </a-button>
                  </a-col>
                  <a-col :span="12" :style="{ textAlign: 'right' }">
                    <a-button type="primary" :style="{ marginLeft: '8px' }" @click="onSubmit(3)">
                      进库
                    </a-button>
                  </a-col>
                </a-row>
              </a-form-model-item>
            </a-form-model>
          </a-spin>
        </a-col>
        <a-col :span="15">
          <a-card :title="false" style="height: 620px">
            <question v-if="rightTab == 1"></question>
            <!--            <a-tabs type="card" @change="onRightTabs">-->
            <!--              <a-tab-pane key="1" tab="报价"></a-tab-pane>-->
            <!--              <a-tab-pane key="2" tab="常见问题"></a-tab-pane>-->
            <!--            </a-tabs>-->
            <!--            <question v-if="rightTab == 1"></question>-->
            <!--            <my-article v-if="rightTab == 2"></my-article>-->
          </a-card>
        </a-col>
      </a-row>
    </div>
    <telephone v-if="telVisible" :telephone="telephone" @cancel="closePhoneList"></telephone>
  </a-modal>
</template>

<script>
import { saveReceive, signQuestionCustomer } from '@/api/adviser'

export default {
  name: 'RejectPhone',
  data () {
    return {
      visible: true,
      leftLoading: false,
      customerForm: {},
      telVisible: false,
      telephone: '',
      rightTab: '1'
    }
  },
  created () {
  },
  methods: {
    onCallCancel () {
      this.visible = false
      this.$emit('cancel', this.visible)
    },
    phoneModal (tel) {
      this.telephone = tel
      this.telVisible = true
    },
    closePhoneList (visible) {
      this.telVisible = visible
    },
    onSubmit (type) {
      const app = this
      const data = {}
      for (const k in app.customerForm) {
        data['customer[' + k + ']'] = app.customerForm[k]
      }
      saveReceive(data).then(res => {
        if (res.status === 0) {
          if (type === 1) {
            app.$confirm({
              centered: true,
              content: '是否标记此用户为问题客户',
              zIndex: 1005,
              onOk: () => {
                signQuestionCustomer(app.customerForm.customer_id).then(b => {
                  if (b.status === 0) {
                    app.onCallCancel()
                  } else {
                    app.$warning({
                      title: b.msg
                    })
                  }
                })
              }
            })
          } else {
            app.onCallCancel()
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
